<template>  
	<view class="content">  
		<view class="avatarWrapper">  
			<view class="avatar">  
				<image class="img" src="../../static/icons/profile.png" mode="widthFix"></image>  
			</view>  
		</view>  
		<view class="form">   
			<view class="inputWrapper">  
				<input class="input" type="text" value="" placeholder="请输入用户名"/>  
			</view>  
			<view class="inputWrapper">  
				<input class="input" type="text" value="" placeholder="请输入密码"/>  
			</view>   
			<view class="action-container"> 
				<view class="loginBtn" @click="login">
				    <text class="btnValue">登录</text>  
				</view>
				<view class="link-container"> 
					<view class="link forgot-password" @click="forgotPassword">  
						<text class="link-text">找回密码</text>  
						<view class="underline"></view>  
					</view>  
					<view class="link register" @click="register">  
						<text class="link-text">注册</text>  
						<view class="underline"></view>  
					</view>  
				</view>   
			</view>  
		</view>   
	</view>  
</template> 

<script>
	export default {
		data() {
			return {
				username: '', // 添加用于绑定输入框的变量  
				password: ''  // 添加用于绑定输入框的变量  
			}
		},
		methods: {
			login() {  
				uni.switchTab({  
				    url: '/pages/index/index'  
				}); 
			    uni.request({  
			        url: '/login', // 你的后端登录API的URL  
			        method: 'POST',  
			        data: {  
			            username: this.username,  
			            password: this.password  
			        },  
			        success: (response) => {  
			            if (response.data.success) { 
			                uni.switchTab({  
			                    url: '/pages/index/index'  
			                });  
			            } else {  
			                // 显示错误消息  
			                uni.showToast({  
			                    title: '登录失败',  
			                    icon: 'none'  
			                });  
			            }  
			        },  
			        fail: (error) => {  
			            // 处理请求失败的情况  
			            console.error(error);  
			            uni.showToast({  
			                title: '请求失败',  
			                icon: 'none'  
			            });  
			        }  
			    });  
				
			},
			forgotPassword() {   
			    uni.navigateTo({  
					url: '/pages/forgot-password/forgot-password'  
			    });  
	    	},  
		    register() {   
				uni.navigateTo({  
					url: '/pages/register/register'  
				});  
			}  
		}
	}
</script>
<style>
	.content {    
	    display: flex;    
	    flex-direction: column; /* 垂直布局 */    
 	    align-items: center; /* 垂直居中 */    
	    justify-content: center;    
	    height: 100vh;  
	    margin-top: -50px; 
	}    
	  
	.avatarWrapper {    
	    display: flex;    
	    justify-content: center;  
	    width: 100%;    
	    height: 200px;
	}    
	  
	.avatar {
	    margin-top: 10px;
	}    
	  
	.img {    
	    width: 120px;
	}
	.form {    
	  margin-top: 20px;   
	  width: 320px;    
	  display: flex;   
	  flex-direction: column;    
	  align-items: center; /* 如果需要垂直居中表单内的元素 */  
	  top: -50px;  
	}  
	  
	.inputWrapper {  
	    width: 300px;  
	    height: 80upx;  
	    background: #bababa;  
	    border-radius: 20px;  
	    box-sizing: border-box;  
	    padding: 0 20px;  
	    margin-top: 25px; 
	}  
	  
	.inputWrapper .input {    
		width: 100%;
		height: 100%;
	    font-size: 15px; 
		text-align: center;
	    color: #000; 
	}  
	  
	.loginBtn {  
	    width: 300px; 
		height: 80upx;
		align-items: center;
	    text-align: center;  
	    background-color: #333; 
	    color: #fff; 
	    border-radius: 50upx;
	    margin-top: 50px;
		justify-content: center;
		display: flex;
	} 
	 
	.loginBtn .btnValue{
		color: #fff;
		
	}
	.action-container {  
	  display: flex;  
	  flex-direction: column;   
	  margin-top: 20px; /* 根据需要调整间距 */  
	}  
	  
	.link-container {  
	  display: flex;  
	  justify-content: space-between; /* 链接水平分散对齐 */  
	   margin-top: 20px;
	}  
	.forgot-password {  
		color: #43b3e6;
		
	}  
	  
	.register {  
		color:  #43b3e6;
	}  
	  
	.underline {   
	  height: 2px;  
	  background-color: #4eabcc;   
	} 
	
</style>
